<template>
  <div class="wxc-tab-page" :style="{backgroundColor:wrapBgColor }">
    <div class="tab-page-wrap" ref="tab-page-wrap">
      <div ref="tab-container" class="tab-container">
        <slot></slot>
      </div>
    </div>
    <div
      class="tab-title-list"
      :style="{ height: (tabStyles.height + (isIpx ? 68 : 0))+'px', paddingBottom:isIpx?'68px':'10px'}"
    >
      <div class="tabItem" @click="setPage(0)" ref="wxc-tab-title-0">
        <image class="tabImg" :src="`root:img/tab1${currentPage==0?'on':''}.png`" />
        <!-- <text :class="[currentPage==0 ? 'active' : '','iconfont']">&#xe63e;</text>-->
        <text class="navTit" :class="[currentPage==0 ? 'active' : '']">Home</text>
      </div>
      <div class="tabItem" @click="setPage(1)" ref="wxc-tab-title-1">
        <image class="tabImg" :src="`root:img/tab2${currentPage==1?'on':''}.png`" />
        <text class="navTit" :class="[currentPage==1 ? 'active' : '']">Categories</text>
      </div>
      <div class="tabItem"></div>
      <div class="tabItem" @click="setPage(2)" ref="wxc-tab-title-2">
        <image class="tabImg" :src="`root:img/tab3${currentPage==2?'on':''}.png`" />
        <text class="navTit" :class="[currentPage==2 ? 'active' : '']">Cart</text>
        <text class="cardNumBox" v-if="cardNum">{{cardNum}}</text>
      </div>
      <div class="tabItem" @click="setPage(3)" ref="wxc-tab-title-3">
        <image class="tabImg" :src="`root:img/tab4${currentPage==3?'on':''}.png`" />
        <text class="navTit" :class="[currentPage==3? 'active' : '']">My GIV</text>
      </div>
      <div class="centerNav" @click="toSeling()" :style="{bottom:isIpx?'68px':'10px'}">
        <text class="iconfont centerIcon" :style="{marginBottom:iconTop+'px'}">&#xe601;</text>
        <text class="navTit">Post</text>
      </div>
    </div>
  </div>
</template>

<script>
const dom = weex.requireModule("dom");
import { get_order_num } from "../mixin/ajax.js";
import Utils from "../mixin/utils";
import asCore from "../mixin/core";

export default {
  props: {
    usersId: {
      default: ""
    },
    tabTitles: {
      type: Array,
      default: () => []
    },
    tabStyles: {
      type: Object,
      default: () => ({
        bgColor: "#FFFFFF",
        height: 120,
        width: 140
      })
    },
    titleType: {
      type: String,
      default: "icon"
    },
    titleUseSlot: {
      type: Boolean,
      default: false
    },
    isTabView: {
      type: Boolean,
      default: true
    },
    duration: {
      type: [Number, String],
      default: 300
    },
    timingFunction: {
      type: String,
      default: "cubic-bezier(0.25, 0.46, 0.45, 0.94)"
    },
    wrapBgColor: {
      type: String,
      default: "#f2f2f2"
    }
  },

  data: () => ({
    translateX: 0,
    cardNum: 0,
    iconTop: -2,
    currentPage: 0
  }),
  created() {
    const { titleType, tabStyles } = this;
    this.isIPhoneX = Utils.env.isIPhoneX();
    this.isIphone = Utils.env.isIOS();
    if (this.isIphone == true) {
    }
     var pref = weex.requireModule("storage");
    pref.getItem("cartNum", event => {
      if (event.result == "success") {
        that.cardNum = event.data;
      }
    });
    // this.getCardNum();
  },
  mounted() {
    this.setPage(this.currentPage);
  },
  methods: {
    getCardNum() {
      var pref = weex.requireModule("storage");
      if (this.usersId) {
        get_order_num(
          { users_id: this.usersId, goods_type: 1 },
          (res, flag) => {
            if (flag && res.code == 200) {
              this.cardNum = res.data.number;

              pref.setItem("cartNum", this.cardNum);
            } else {
              pref.setItem("cartNum", 0);
              this.cardNum = 0;
            }
          }
        );
      } else {
        pref.setItem("cartNum", 0);
        this.cardNum = 0;
      }
    },
    toSeling() {
      if (!this.usersId) {
        this.push("root:app/login/login.js");
      } else {
        this.push("root:app/selling/selling.js");
      }
      this;
    },
    next() {
      let page = this.currentPage;
      if (page < this.tabTitles.length - 1) {
        page++;
      }
      this.setPage(page);
    },
    prev() {
      let page = this.currentPage;
      if (page > 0) {
        page--;
      }
      this.setPage(page);
    },
    setPage(page, url = null, animated = true) {
      if (page == 3 && !this.usersId) {
        this.push("root:app/login/login.js");
        return false;
      }

      if (!this.isTabView) {
        this.jumpOut(url);
        return;
      }

      const previousPage = this.currentPage;
      const currentTabEl = this.$refs[`wxc-tab-title-${page}`][0];
      const { width } = this.tabStyles;
      const appearNum = parseInt(750 / width);
      const tabsNum = this.tabTitles.length;
      const offset = page > appearNum ? -(750 - width) / 2 : -width * 2;
      if (appearNum < tabsNum) {
        (previousPage > appearNum || page > 1) &&
          dom.scrollToElement(currentTabEl, {
            offset,
            animated
          });
        page <= 1 &&
          previousPage > page &&
          dom.scrollToElement(currentTabEl, {
            offset: -width * page,
            animated
          });
      }
      this.currentPage = page;
      this._animateTransformX(page, animated);
    },
    jumpOut(url) {
      url && Utils.goToH5Page(url);
    },
    _animateTransformX(page, animated) {
      const { duration, timingFunction } = this;
      const computedDur = animated ? duration : 0.00001;
      const containerEl = this.$refs[`tab-container`];
      const dist = page * 750;
      containerEl.s;
      const animation = weex.requireModule("animation");
      animation.transition(
        containerEl,
        {
          styles: {
            transform: `translateX(${-dist}px)`
          },
          duration: 0,
          timingFunction,
          delay: 0
        },
        () => {}
      );
    }
  }
};
</script>

<style scoped>
.iconfont {
  font-family: iconfont;
  font-size: 40px;
  margin-bottom: 10px;
}

.wxc-tab-page {
  flex: 1;
}

.tab-title-list {
  flex-direction: row;
  justify-content: space-around;

  background-color: #ffffff;
  align-items: flex-end;

  padding-bottom: 10px;
  position: relative;
}

.title-item {
  justify-content: center;
  align-items: center;
  border-bottom-style: solid;
}

.tab-page-wrap {
  width: 750px;
  flex: 1;
  overflow: hidden;
}

.tab-container {
  flex: 1;
  flex-direction: row;
  position: absolute;
}

.tab-text {
  lines: 1;
  text-overflow: ellipsis;
}

.desc-tag {
  position: absolute;
  top: 10px;
  right: 22px;
  border-radius: 30px;
  background-color: #ff3e3e;
  height: 30px;
  width: 30px;
  align-items: center;
  justify-content: center;
  padding-left: 6px;
  padding-right: 6px;
}

.dot {
  width: 14px;
  height: 14px;
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 14px;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  position: absolute;
  top: 13px;
  right: 43px;
  background-color: #ff3e3e;
}

.desc-text {
  font-size: 20px;
  color: #ffffff;
}

.icon-font {
  margin-bottom: 8px;
}

.no-margin {
  margin-bottom: 0px;
}

.tabItem {
  align-items: center;
  width: 150px;
  padding-top: 10px;
  position: relative;
}
.cardNumBox {
  position: absolute;
  background-color: rgba(186, 136, 51, 1);
  border-radius: 20px;
  padding: 0 8px;
  height: 33px;
  color: #fff;
  line-height: 33px;
  font-size: 24px;
  right: 40px;
  top: 0px;
  text-align: center;
}
.tabImg {
  width: 45px;
  height: 45px;
  margin-bottom: 5px;
}
.navTit {
  line-height: 28px;
  font-size: 20px;
  margin-top: 8px;
}

.centerNav {
  position: fixed;
  left: 325px;
  bottom: 10px;
  justify-content: center;
  align-items: center;
}

.centerIcon {
  width: 116px;
  height: 116px;
  text-align: center;
  line-height: 96px;
  /* margin-bottom: 20px; */
  background-color: #c09244;
  border-radius: 58px;
  color: #ffffff;
  border-color: #fefefe;
  border-width: 10px;
  border-style: solid;
  box-shadow: -5px 0 5px #ffffff;
}

.active {
  color: #bd8d38;
}
</style>
